<template>
  <div class="ye_wrap">
    <div class="ye_radius">
      <van-cell
        title="我的订单"
        is-link
        value="查看全部订单"
        value-class="resize"
        title-class="reweight"
        to="/order/0"
      />
      <ul class="order">
        <li v-for="item in titleList" :key="item.id" @click="clickHandle(item.id)">
          <van-icon :name="item.icon" size="22" :badge="item.badge" />
          <p>{{item.title}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup } from "vant";
import { Icon } from "vant";
import { getOrderList } from "@/api/order.js";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Icon);
export default {
  data() {
    return {
      titleList: [
        {
          id: 1,
          title: "待付款",
          icon: "pending-payment",
          badge: null
        },
        {
          id: 2,
          title: "待发货",
          icon: "send-gift-o",
          badge: null
        },
        {
          id: 3,
          title: "待收货",
          icon: "logistics",
          badge: null
        },
        {
          id: 4,
          title: "待评价",
          icon: "comment-o",
          badge: null
        },
        {
          id: 5,
          title: "退款/售后",
          icon: "service-o",
          badge: null
        }
      ]
    };
  },
  methods: {
    getData() {
      this.titleList.forEach(async (item, index) => {
        let rs = await getOrderList({ status: index + 1 });
        if (rs.data.length !== 0) {
          item.badge = rs.data.length;
        } else {
          item.badge = "";
        }
      });
    },
    clickHandle(url) {
      this.$router.push("/order/" + url);
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
@import '~assets/yee.css';

.reweight {
  font-weight: bolder;
}

.resize {
  font-size: 0.12rem;
}

.order {
  display: flex;

  li {
    flex: 1;
    text-align: center;
    padding-top: 0.22rem;
    padding-bottom: 0.22rem;

    p {
      margin-top: 0.02rem;
      font-size: 0.12rem;
      color: #444;
    }
  }
}
</style>